li,a{
    display: block;
    list-style: none;
    text-decoration: none;
}
.container {
position: relative;
width: 1190px;
height: 460px;
background-color: aqua;
margin: auto;
display: flex;
}
.container .a {
display: block;
width: 234px;
height: 420px;
background-color: #868686;
display: flex;
flex-direction: column;
padding: 20px 0 20px 0;
}
.container .a li {
text-indent: 25px;
width: 100%;
flex: 1;
line-height: 42px;
position: relative;
}
.container .a li a {
color: #fff;
}
.container .a li .bfg {
text-indent: -5px;
position: absolute;
width: 990px;
height: 430px;
padding-top: 30px;
z-index: 10;
left: 234px;
background-color: #fff;
border: 1px solid #bdbdbd;
top: -20px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
display: none;
}
.container .a li .bfg #bv {
width: 180px;
height: 100px;
display: flex;
}
.container .a li .bfg #bv img {
width: 100px;
height: 100px;
vertical-align: middle;
}
.container .a li .bfg #bv #df {
text-align: -25px;
align-self: center;
vertical-align: middle;
}
.container .a li .bfg #bv:hover #df {
color: red;
}
.container .a li:hover a {
display: block;
background-color: orangered;
}
.container .a li:hover .bfg {
display: flex!important;
background-color: #fff;
}
.container .a li:hover .bfg #df {
background-color: #fff;
color: #000;
}
.container .swiper {
flex: 1;
z-index: 1;
}
.container .swiper img {
width: 100%;
height: 100%;
}